<template>
  <header-nav />
  <manager-hearder />
  <div class="table">
    <div style="margin: 15px 0">
      <el-button @click="handleAdd()">添加</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="ID" prop="id" width="50" />
      <el-table-column label="用户名" prop="userName" width="120" />
      <el-table-column label="邮箱" prop="email" width="120" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="类型" prop="userType" />
      <el-table-column label="创建时间" prop="createDate" />
      <el-table-column label="修改时间" prop="updateDate" />
      <el-table-column fixed="right" label="操作" width="70">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="dialogFormVisible" title="用户" width="380px" center>
    <el-form :model="form">
      <el-form-item label="用户名" label-width="80px">
        <el-input v-model="form.userName" />
      </el-form-item>
      <el-form-item label="邮箱" label-width="80px">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="手机号" label-width="80px">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="类型" label-width="80px">
        <el-input v-model="form.userType" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { manager } from '@/api/manager'
import HeaderNav from '@/components/common/HeaderNav.vue'
import ManagerHearder from '@/components/manager/ManagerHearder.vue'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

const tableData = ref([])
const current = ref(1)
const size = ref(10)
const total = ref(0)
const currentId = ref(0)
const currentIndex = ref(-1)
const dialogFormVisible = ref(false)

const form = reactive({
  userName: '',
  email: '',
  phone: '',
  userType: ''
})

const eidt = async () => {
  const id = currentId.value
  const { userName, email, phone, userType } = form
  const res = id
    ? await manager.user.edit({
      id,
      userName,
      email,
      phone,
      userType
    })
    : await manager.user.add({
      userName,
      email,
      phone,
      userType
    })
  if (res.code === 0) {
    const row = Object.assign({}, tableData.value[currentIndex.value], {
      userName,
      email,
      phone,
      userType
    })
    currentIndex.value >= 0 &&
      tableData.value.splice(currentIndex.value, 1, row)
    ElMessage.success(`${id ? '修改' : '创建'}成功！`)
    dialogFormVisible.value = false
  } else {
    window.location.href = '/'
  }
}

const getList = async () => {
  const res = await manager.user.getList({
    current: current.value,
    size: size.value
  })
  if (res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  } else {
    window.location.href = '/'
  }
}

const handleConfirm = () => {
  eidt()
}

const handleCurrentChange = (val: number) => {
  current.value = val
  getList()
}

const handleAdd = () => {
  currentId.value = 0
  currentIndex.value = -1
  form.userName = ''
  form.email = ''
  form.phone = ''
  form.userType = ''
  dialogFormVisible.value = true
}

const handleEdit = (index: number, row: any) => {
  currentId.value = row.id
  currentIndex.value = index
  const { userName, email, phone, userType } = row
  form.userName = userName
  form.email = email
  form.phone = phone
  form.userType = userType
  dialogFormVisible.value = true
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.table {
  width: 850px;
  margin: 20px auto;

  .el-pagination {
    margin: 10px auto 5px;
  }
}
</style>
